<template>
	<view>
		<view class="search_box">
			<image src="../../static/s1.png" class="goback" @click="gobackClick" mode="widthFix"></image>
			<text class="topicText">南传佛教</text>
		</view>
		<!-- 视频 -->
		<view class="content_video">
			<view class="content_video_one">
				<image src="../../static/video.png" style="width: 100%;" mode="widthFix"></image>
				<image src="../../static/icon.png" class="iconImg" mode="widthFix"></image>
			</view>
			<text style="padding: 20rpx 0; ">南传佛教的来源</text>
			<text style="color: #C52B2E; font-size: 28rpx;">请您点击视屏观看 </text>
		</view>
		<!-- 历史 -->
		<view class="historyBox">
			<image src="../../static/n2.png" class="historyImg" mode="widthFix"></image>
			<text>南传佛教历史源流</text>
		</view>
		<view class="historyBody">
			<image src="../../static/n4.png" style="width: 70%;margin: 0 auto;" mode="widthFix"></image>
			<view class="historyText">
				<text>公元前三世纪，由阿育王的儿子马兴德长老组成的第九弘法使团把佛教正式传入斯里兰卡。马兴德早年出家，师事摩嘎离补答·帝思大长老学习三藏圣典，博学多闻、戒行精严。在他</text>
				<image src="../../static/n5.png" style="width: 100%; margin: 15rpx 0;" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//返回往期文章
			gobackClick(){
				uni.navigateTo({
					url:'../Buddha/Buddha'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content_video {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 0 0 80rpx;
		//background-color: pink;
		font-size: 30rpx;
		color: #333;

		.content_video_one {
			display: flex;
			width: 100%;
			height: 360rpx;
			position: relative;

			.iconImg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 139rpx;
			}
		}

	}

	.historyBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		background: url(../../static/n3.png) no-repeat;
		background-size: 100% 100%;
		color: #C52B2E;
		font-size: 36rpx;

		.historyImg {
			width: 328rpx;
			border-radius: 50%;
			margin-bottom: 15rpx;
		}
	}

	.historyBody {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 10rpx 20rpx;
	//	background-color: pink;
		margin: 30rpx 0;
		box-sizing: border-box;
		.historyText{
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 23rpx;
			box-sizing: border-box;
			border: 3rpx solid #C58139;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>
